<!-- 卡片>呼叫中心 -->
<template>
	<div class="cell-center">
		<div class="card-title" @click="$Ctl.enterChild('CellCenter', { orgId: orgId })">
			<span class="card-title-text">呼叫中心</span>
		</div>
		<div v-show="!showAll" class="cell-content">
			<div class="dutyer-num">
				当前值班<span>{{ dutyerNum }}</span>
			</div>
			<div class="duty-list">
				<div class="dutyer-info" v-for="(item, index) in miniDutyerList" :key="index" :class="{ 'dutyer-online': item.isOnduty }">
					<template v-if="index < 5">
						<img class="dutyer-photo" :class="{ onduty: item.isOnduty }" :src="item.headUrl || defaultUserHead" width="45px" height="45px" />
						<div class="dutyer-photo-hover">
							<i class="iconfont icon_phone" @click="onlineCallPhone(item)"></i>
							<span v-if="item.role == 19">|</span>
							<i v-if="item.role == 19" class="iconfont icon_video" @click="onlineCallVideo(item)"></i>
						</div>
						<div class="dutyer-name">{{ item.name }}</div>
					</template>
				</div>
				<!-- 更多 -->
				<div class="more-dutyer" @click="moreDutyer"></div>
			</div>
		</div>
		<!-- 展示所有值班人信息 -->
		<div v-show="showAll" class="all-dutyer-content">
			<div class="close-more" @click="closeAll"></div>
			<div class="content">
				<!-- 头部 -->
				<div class="allmode-head">
					<div class="allmode-head-item">
						<p class="allmode-head-item-title">总人数</p>
						<p class="allmode-head-item-num total-num">
							{{ dutyerTotal }}
						</p>
					</div>
					<div class="allmode-head-item">
						<p class="allmode-head-item-title">当前值班</p>
						<p class="allmode-head-item-num onduty-num">
							{{ dutyerNum }}
						</p>
					</div>
				</div>
				<!-- 搜索区域 -->
				<div class="search-content">
					<el-input placeholder="请输入内容" v-model="searchForm.text" class="input-with-select" @keyup.enter.native="getDutyerList(0)">
						<el-select v-model="searchForm.orgId" filterable slot="prepend" placeholder="请选择" @change="getDutyerList(0)">
							<el-option v-if="isMuilUnitUser" label="所有单位" :value="$store.state.userInfo.organizationIds"></el-option>
							<el-option v-for="item in orgList" :label="item.orgName" :value="item.orgId.toString()" :key="item.orgId"></el-option>
						</el-select>
						<i class="el-icon-search el-input__icon" slot="prefix"></i>
					</el-input>
				</div>
				<!-- 展示区域 -->
				<div class="dutyer-list-content">
					<ul class="dutyer-list" v-infinite-scroll="getDutyerList" infinite-scroll-disabled="isOver">
						<li class="dutyer-list-item" v-for="(item, index) in dutyerList" :key="index">
							<!-- 头像 -->
							<div class="headphoto-wrap" :class="{ 'dutyer-online': item.isOnduty }">
								<img class="dutyer-headphoto" :class="{ onduty: item.isOnduty }" :src="item.headUrl || defaultUserHead" />
								<div class="phone-hover">
									<i class="iconfont icon_phone" @click="onlineCallPhone(item)"></i>
									<i v-if="item.role == 19" class="iconfont icon_video" @click="onlineCallVideo(item)"></i>
								</div>
							</div>
							<p class="dutyer-job ell">{{ item.roleName }}</p>
							<p class="dutyer-name">{{ item.name }}</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 拨号软键盘 -->
		<!-- TODO 在三维环境下 软键盘按钮是没有的 需要cs端处理  前端处理 : 在cs端的时候将软键盘按钮放在顶部, 其余情况还在右下角 -->
		<!-- <div v-if="showAll && !$Ctl.isCs(true)"> -->
		<div v-if="innerDrawer" class="number-desk-drawer" :class="{
                'drawer-open': innerDrawer,
                'drawer-close': !innerDrawer
            }">
			<i class="el-icon-close close-btn" @click="handleClose"></i>
			<div class="number-desk-number-content">
				<el-input ref="inputCallNumber" class="call-number-input" placeholder="" autofocus v-model="callNumber" clearable></el-input>
			</div>
			<div>
				<ul class="number-btn-list">
					<li class="number-btn-item" @click="clickNumberDesk('1')">
						1
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('2')">
						2
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('3')">
						3
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('4')">
						4
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('5')">
						5
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('6')">
						6
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('7')">
						7
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('8')">
						8
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('9')">
						9
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('*')">
						*
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('0')">
						0
					</li>
					<li class="number-btn-item" @click="clickNumberDesk('#')">
						#
					</li>
				</ul>
			</div>
			<div :span="24" class="number-desk-btn-content">
				<el-button class="call-btn iconfont icon_phone" circle @click="onlineCallPhone"></el-button>
			</div>
		</div>
		<!-- v-show="!$Ctl.isCs(true)" -->
		<el-tooltip class="item" effect="dark" content="软键盘">
			<div class="number-disk-btn" :class="$Ctl.isCs(true) ? 'number-disk-btn-cs' : ''" @click="handleOpen"></div>
		</el-tooltip>
		<!-- </div> -->
	</div>
</template>

<script>
import { getOrgsStatusList } from '@/api/organization'
import { callPhone, getAllUser } from '@/api/common'

export default {
	props: {
		orgId: {
			default() {
				return false
			},
		},
		// 外部传入的是否直接显示全部人员页面
		isShowAll: {
			default() {
				return false
			},
		},
		// 外部传入的关闭方法
		reCloseFun: {
			default() {
				return false
			},
		},
		// 外部传入的选择拨打人员的id
		userId: {
			default() {
				return false
			},
		},
		// 外部传入的选择拨打人员的姓名
		userName: {
			default() {
				return false
			},
		},
	},
	data() {
		return {
			showAll: this.isShowAll, // 展示所有
			defaultUserHead: require('../../assets/images/default/userHead.png'),
			dutyerTotal: 0, // 值班总人数
			dutyerNum: 0, // 当前值班人数
			miniDutyerList: [],
			dutyerList: [],
			searchForm: {
				text: this.userName || '',
				orgId:
					(this.orgId ? this.orgId.toString() : '') || this.$store.state.userInfo.organizationIds,
			},
			pageIndex: -1,
			isOver: false,
			isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser, //0:单单位用户;1:多单位用户
			innerDrawer: false,
			callNumber: '', // 拨打的号码
		}
	},
	computed: {
		orgList() {
			return this.$store.state.orgList
    },
    speechData(){
			return this.$store.state.speechData
    }
  },
	created() {
		let that = this

		// that.getDutyerList('141', '')
		// 对外暴露的方法
		window.FunList.onlineCallVideo = this.onlineCallVideo

		if (!that.isMuilUnitUser || (that.isMuilUnitUser && !that.orgId)) {
			//推送只推一级首页
			window.FunList.cardCellCenter_ws = that.getOrgList
    }
    
    if(this.speechData.speechTxt&&this.speechData.action==101004&&this.speechData.speechTxt.indexOf('呼叫中心') < 0){
      let arr = this.speechData.speechTxt.split('呼叫')
      if ( arr.length == 2 && arr[1].length <= 4){
        console.log('呼叫',this.speechData)
        this.searchForm.text = arr[1]
        this.moreDutyer()
      }
    }
	},
	methods: {
		// 获取接入单位/报警单位
		getOrgList() {
			let that = this
			getOrgsStatusList({
				orgIds: that.$store.state.userInfo.organizationIds,
			}).then((res) => {
				if (res.status === 200) {
					this.$store.commit('setOrgList', res.data.orgDetail)
				}
			})
		},
		// 获取值班人
		getDutyerList(pageIndex) {
			let that = this
			that.$Ctl.loading(1, 10000)
			if (typeof pageIndex != 'undefined') {
				that.pageIndex = pageIndex
			} else {
				that.pageIndex += 1
			}
			getAllUser({
				organizationIds: that.searchForm.orgId,
				name: that.searchForm.text,
				queryType: 1,
				pageIndex: that.pageIndex,
				pageSize: 20,
			}).then((res) => {
				if (res.status === 200) {
					// 获取值班人信息
					that.dutyerTotal = res.total || 0
					that.dutyerNum = res.data.ondutyCount || 0
					if (typeof pageIndex != 'undefined' && that.pageIndex === 0) {
						that.isOver = false
						// 重新查询
						that.dutyerList = res.data.userList
					} else {
						that.dutyerList.push.apply(that.dutyerList, res.data.userList)
					}
					if (that.pageIndex === 0) {
						that.miniDutyerList = res.data.userList.slice(0, 5)
						// 如果有指定人员，直接呼叫
						that.$nextTick(() => {
							if (that.userId) {
								for (let i = 0, len = that.dutyerList.length; i < len; i++) {
									if (that.userId == that.dutyerList[i].accountName) {
										$($('.detail-page .headphoto-wrap')[i]).trigger('click')
									}
								}
							} else {
								if (
									this.searchForm.text &&
									this.speechData.action == 101004 &&
									this.dutyerList.length > 0
								) {
									this.onlineCallVideo(this.dutyerList[0])
									this.$store.commit('setSpeechData', {})
								}
							}
						})
					}
					// 最后一页停止滚动加载
					if (res.data.userList.length < 20) {
						that.isOver = true
					} else {
						that.isOver = false
					}
				}
				that.$Ctl.loading(0)
			})
		},
		// 查看更多值班人
		moreDutyer() {
			let that = this
			that.showAll = true
			let arr = that.bsConfig.RightMenu.cards1 // 获取全局的菜单配置
			let newArr = []
			// 遍历卡片配置，将其他的高度设为0,
			for (let i = 0, len = arr.length; i < len; i++) {
				let obj = $.extend({}, arr[i])
				if (arr[i].id == 'CardCellCenter') {
					obj.height = '98%'
				} else {
					obj.height = '0'
				}
				newArr.push(obj)
			}
			// 触发外层父组件配置卡片组数据变化
			that.$emit('configChange', newArr, false)
		},
		closeAll() {
			let that = this
			if (that.reCloseFun) {
				that.reCloseFun()
			} else {
				that.showAll = false
				// 触发外层父组件配置卡片组数据变化
				that.$emit('configChange', that.bsConfig.RightMenu.cards1, true)
			}
		},
		// 音视频
		onlineCallVideo(item) {
			let that = this
			if (!that.$Ctl.getClickEnabel(1)) return
			// 弹出框打开
			that.$Ctl.openPopup('DialNumber', '', {
				name: item.name,
				accountName: item.accountName,
				headUrl: item.headUrl,
			})
		},
		// 打电话
		onlineCallPhone(item) {
			let that = this
			let parames = {}

			if (item && item.phone) {
				parames['phone'] = item.phone
				parames['customerOrgId'] = item.organizationIds
				parames['customerUserName'] = item.accountName
			} else {
				if (!that.callNumber.trim()) {
					that.$Ctl.message('请输入电话号码！', 'warning')
					return false
				} else {
					parames['phone'] = that.callNumber
				}
			}

			callPhone(parames).then((res) => {
				if (res.status === 200) {
					that.$Ctl.message('呼叫成功！', 'success')
				} else {
					that.$Ctl.message(res.info, 'error')
				}
			})
		},
		handleOpen() {
			this.callNumber = ''
			this.innerDrawer = true
			setTimeout(() => {
				this.$nextTick(() => {
					this.$refs['inputCallNumber'].focus()
				})
			}, 600)
		},
		handleClose() {
			this.innerDrawer = false
		},
		// 点击号码盘
		clickNumberDesk(val) {
			let num = val
			this.callNumber += String(num)
		},
	},
}
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.cell-center {
	position: relative;
	height: 100%;
	width: 100%;
	.cell-content {
		position: absolute;
		top: 48px;
		padding-left: 140px;
		width: 100%;
		height: calc(100% - 32px);
		background: url(../../assets/images/cards/cell-center-bg.png) 20px center no-repeat;
		.dutyer-num {
			padding-top: 5px;
			color: #fff;
			font-size: 18px;
			span {
				margin: 0 30px;
				font-size: 24px;
				color: #85cb80;
			}
		}
		.duty-list {
			display: flex;
			margin-top: 15px;
			.dutyer-info {
				position: relative;
				margin: 0 3px;
				cursor: pointer;
				&::after {
					position: absolute;
					top: 4px;
					left: 4px;
					content: '';
					width: 37px;
					height: 37px;
					border-radius: 50%;
					// background: rgba(255,255,255,.3);
					z-index: 2;
				}
				&.dutyer-online:after {
					display: none;
				}
				&:hover .dutyer-photo-hover {
					display: flex;
				}
				.dutyer-photo {
					border: 2px solid #eee;
					border-radius: 50%;
					padding: 2px;
				}
				.dutyer-photo-hover {
					display: none;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 42px;
					left: -13px;
					width: 70px;
					height: 30px;
					// background: url(../../assets/images/cards/phone-hover.png) center center no-repeat;
					// background-size: 100%;
					background-color: rgba(0, 0, 0, 0.8);
					color: rgba(255, 255, 255, 0.4);
					z-index: 10;
					.iconfont {
						width: 50%;
						font-size: 20px;
						text-align: center;
						color: rgba(255, 255, 255, 1);
						background: linear-gradient(0deg, rgba(87, 155, 255, 1), rgba(137, 226, 255, 1));
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
				.onduty {
					border-color: #85cb80;
					z-index: 5;
				}
				.dutyer-name {
					width: 40px;
					color: #a3bedd;
					text-align: center;
					font-size: 12px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.more-dutyer {
				width: 40px;
				height: 50px;
				background: url(../../assets/images/cards/more-dutyer.png) center 10px no-repeat;
				cursor: pointer;
			}
		}
	}
	.all-dutyer-content {
		.close-more {
			position: absolute;
			left: 95%;
			top: 12px;
			width: 13px;
			height: 13px;
			background: url(../../assets/images/cards/close.png) center center no-repeat;
			background-size: cover;
			cursor: pointer;
		}
		.content {
			padding-top: 20px;
			.allmode-head {
				padding-left: 140px;
				width: 100%;
				height: 110px;
				background: url(../../assets/images/cards/cell-center-bg.png) 20px center no-repeat;
				display: flex;
				.allmode-head-item {
					width: 50%;
					height: 100%;
					line-height: 50px;
					.allmode-head-item-title {
						color: #a3bedd;
						font-size: 18px;
					}
					.allmode-head-item-num {
						font-size: 28px;
						font-weight: bold;
					}
					.total-num {
						color: #4691e5;
					}
					.onduty-num {
						color: #85cb80;
					}
				}
			}
			.search-content {
				margin: 25px 0;
				width: 100%;
				height: 50px;
				background: url(../../assets/images/cards/search-bg.png) center center no-repeat;
				background-size: 100%;
				.el-select .el-input {
					width: 130px;
				}
				.input-with-select .el-input-group__prepend {
					background-color: #fff;
				}
			}
			.dutyer-list-content {
				width: 100%;
				height: 820px;
				overflow: auto;
				.dutyer-list {
					display: flex;
					list-style: none;
					flex-wrap: wrap;
					justify-content: flex-start;
					.dutyer-list-item {
						margin: 0 0 22px 0;
						padding: 20px 15px;
						width: 32%;
						height: 198px;
						background: url(../../assets/images/cards/dutyer-item-bg.png) 0 0 no-repeat;
						background-size: 100% 100%;
						.headphoto-wrap {
							position: relative;
							cursor: pointer;
							&::after {
								position: absolute;
								top: 50%;
								left: 50%;
								margin-top: -42px;
								margin-left: -42px;
								content: '';
								width: 84px;
								height: 84px;
								border-radius: 50%;
								// background:rgba(255,255,255,.3);
								z-index: 2;
							}
							&.dutyer-online:after {
								display: none;
							}
							.dutyer-headphoto {
								display: block;
								margin: 0 auto;
								padding: 5px;
								width: 92px;
								height: 92px;
								border: 2px solid #eee;
								border-radius: 50%;
							}
							.onduty {
								border-color: #63d375;
							}
							.phone-hover {
								display: none;
								justify-content: center;
								align-items: center;
								position: absolute;
								top: 5px;
								left: 50%;
								margin-left: -41px;
								width: 82px;
								height: 82px;
								background-color: rgba(0, 0, 0, 0.3);
								border-radius: 50%;
								// background: url(../../assets/images/cards/phone-hover.png) center center no-repeat;
								// background-size: 100%;
								z-index: 10;
								.iconfont {
									width: 40%;
									font-size: 26px;
									text-align: center;
									color: rgba(255, 255, 255, 1);
									background: linear-gradient(0deg, rgba(87, 155, 255, 1), rgba(137, 226, 255, 1));
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
								}
							}
							&:hover .phone-hover {
								display: flex;
							}
						}

						.dutyer-job {
							margin-top: 20px;
							height: 24px;
							line-height: 24px;
							font-size: 16px;
							color: #a3bedd;
						}
						.dutyer-name {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							height: 28px;
							line-height: 28px;
							font-size: 18px;
							color: #fff;
						}
					}
					.dutyer-list-item:nth-child(3n + 2) {
						margin-left: 6px;
						margin-right: 6px;
					}
				}
			}
		}
	}
	.number-disk-btn {
		position: absolute;
		bottom: 10px;
		right: -100px;
		width: 80px;
		height: 60px;
		background: url(../../assets/images/cards/cell-keys.png) center center no-repeat;
		background-size: contain;
		cursor: pointer;
		&:hover {
			background: url(../../assets/images/cards/cell-keys-hover.png) center center no-repeat;
			background-size: contain;
		}
	}
	.number-disk-btn-cs {
		top: -75px;
		right: 0;
	}
}
</style>
<style lang="scss">
.cell-center {
	.all-dutyer-content {
		.search-content {
			.el-input-group__prepend,
			.el-input__inner,
			.el-input__prefix {
				background-color: rgba(255, 255, 255, 0);
				border: none;
				height: 50px;
				color: #fff;
			}
			input::-webkit-input-placeholder {
				color: #505961;
			}
			input::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #505961;
			}
			input:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #505961;
			}
			input:-ms-input-placeholder {
				/* Internet Explorer 10-11 */
				color: #505961;
			}
			.el-input-group__prepend {
				border-right: 1px solid #223443;
			}
			.el-input--prefix > input.el-input__inner {
				padding-left: 45px;
			}
			.el-input__prefix {
				.el-input__icon {
					line-height: 50px;
					font-size: 22px;
					text-indent: 5px;
				}
			}
			.el-select .el-input {
				width: 200px;
			}
		}
	}
	.number-desk-drawer {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 20px 62px;
		width: calc(100% - 10px);
		height: 420px;
		z-index: 9999;
		background: rgba(3, 20, 41, 0.9);
		border-radius: 4px;
		transition: transform 0.4s ease;
		&.drawer-open {
			transform: translateY(0px);
		}
		&.drawer-close {
			transform: translateY(500px);
		}
		.close-btn {
			position: absolute;
			top: 10px;
			right: 10px;
			color: #fff;
			font-size: 26px;
			cursor: pointer;
		}
		.number-desk-number-content {
			margin-top: 30px;
			margin-bottom: 20px;
			.call-number-input {
				.el-input__inner {
					background-color: transparent;
					border-color: transparent;
					color: #fff;
					font-size: 26px;
				}
			}
		}
		.number-btn-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.number-btn-item {
				margin-bottom: 10px;
				width: calc(33.33% - 5px);
				height: 46px;
				line-height: 46px;
				background: rgba(255, 255, 255, 0.2);
				border: 1px solid rgba(255, 255, 255, 0.2);
				border-radius: 8px;
				text-align: center;
				color: #fff;
				font-size: 26px;
				cursor: pointer;
				&:hover {
					background-color: #409eff;
				}
			}
		}
		.number-desk-btn-content {
			margin-top: 10px;
			display: flex;
			justify-content: center;
			.call-btn {
				font-size: 30px;
				background-color: #5e9af4;
				border-color: #5e9af4;
				color: #fff;
				&:hover {
					background-color: #0785d4;
					border-color: #5e9af4;
				}
			}
		}
	}
}
/* 不同分辨率适配 */
@media screen {
	//1920
}
@media screen and (min-width: 1930px) {
	//1920< <2560
}
// 大于2560
@media screen and (min-width: 2560px) {
	.cell-center {
		.all-dutyer-content {
			.content {
				.dutyer-list-content {
					.dutyer-list {
						.dutyer-list-item {
							margin-right: 10px !important;
							margin-left: 0 !important;
						}
					}
				}
			}
		}
	}
}
</style>
